<template>
	<view :style="{width:'100%',
	backgroundImage:`url(${jgbjURL})`,
	backgroundSize:'cover',
	alignItems: 'center',
	paddingLeft: '30rpx', 
	paddingTop: '30rpx',
	fontSize: '30rpx',
	animation: 'fadeIn 0.8s ease-in-out'}">
		<view>
			<!-- 显示标题区域 -->
			<view class="ShowTitle">
				<!-- 显示提交时间 -->
				<view class="ShowTitle-1" @click="rotateTitlea" :class="{'rotateda':rorareda}">
					提交时间：{{ dataResult.startTime }}
				</view>
				<!-- 显示用时 -->
				<view class="ShowTitle-2" @click="rotateTitleb" :class="{'rotatedb':roraredb}">
					用时: {{ dataResult.during }}
				</view>
			</view>
		</view>

		<!-- 测评结果展示区域 -->
		<view class="Third-div">
			<!-- 测评结果标题 -->
			<view class="ResultTitle" :style="{backgroundImage: `url(${BlueURL})`,}">
				测评结果
			</view>
			<!-- 结果展示内容 -->
			<view class="Result">
				<view class="bgk1">
					<!-- aiTextView  封装一个组件 -->
					
					<view style="min-height: 40vh; position: relative;"  >			
						<view style="position: absolute;  top: 18vh; left: 25vw;" v-show="dataResult.aiText?false:true">
							<u-loading-icon text="加载中" textSize="18"></u-loading-icon>
						</view>
						{{dataResult.aiText}}
					</view>
					<view class="bgk2">
						<view>{{typeText}}</view>
						<careerResult :testType="dataResult.type"></careerResult>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import careerResult from '@/pages/careerModel/careerResult/careerEchart.vue'
	import {requestTask	} from '../../../../api/AIapi/AIapi';
	import { insertOrUpdateResult } from '../../../../api/mentalTest/CareerAnchorTest';
	import { insterTestList } from '../../../../api/mentalTest/testList';
	export default {
		components: {
			careerResult
		},
		data() {
			return {
				BlueURL: this.$baseURL + '/profile/upload/2025/05/10/jgbj_20250510163608A007.png',
				jgbjURL: this.$baseURL + '/profile/upload/2025/05/10/jgbj_20250507101024A028_20250510150221A029.png',
				rorareda: true,
				roraredb: true,
				dataResult: null,
				isSubmit:true,
				testId:null,
				typeText:"",
				storageData:null,
				dhdata: {
					inputs: {},
					dhimg: "",
					query: "",
					response_mode: "streaming",
					conversation_id: "",
					user: "abc-123"
				} //dhimg是上传图片后的id，query是给ai发送的对话信息
			}
		},







		onLoad(option) {
	
			// 解析dataresult，用于展示eacher图标，开始时间和持续时间。。。。
			this.dataResult = JSON.parse(decodeURIComponent(option.data));
			// 判断是否重复提交
			this.isSubmit=option.isSubmit==='false'?false:true
			// 测试id
			this.testId=option.testId
			this.typeText="经过初步检测，您的核心职业锚为："+  option.type+"，更详细的测试结果正在由ai分析，请耐心等待...."
			
			
			// 询问ai的话
			this.dhdata.query=option.questionAi
			requestTask(this.dhdata, (res) => {
				if(res==="streamingEND"){
					// 流式文本返回结束,执行存储相关逻辑
						this.storageLogic()
				}else{
					this.dataResult.aiText = this.dataResult.aiText + res
				}
				
			})

		},
		methods: {
			rotateTitlea() {
				this.rorareda = !this.rorareda
			},
			rotateTitleb() {
				this.roraredb = !this.roraredb
			},
			
			
			
			
			storageLogic(){
			//如果没提交进行提交 
			if(!this.isSubmit) { insterTestList(this.testId)}
				
				
			// 转换存储数据的结构
			this.storageData={
				...this.dataResult,
				gm:this.dataResult.type.GM,
				tf:this.dataResult.type.TF,
				au:this.dataResult.type.AU,
				se:this.dataResult.type.SE,
				ec:this.dataResult.type.EC,
				sv:this.dataResult.type.SV,
				ch:this.dataResult.type.CH,
				ls:this.dataResult.type.LS
			}
			this.storageData.type=null
			insertOrUpdateResult(this.storageData)		
		
			}
			
			
		},
	}
</script>

<style>
	/* 全局段落文字大小 */
	p {
		font-size: 28rpx;
		color: #333;
	}

	/* 页面整体容器 */
	.tup {
		width: 270rpx;
		height: 270rpx;
		float: right;
		margin-right: 60rpx;
	}

	.bt {
		font-size: 50rpx;
		font-weight: bold;
		float: left;
		margin-left: 16%;
		line-height: 330rpx;
	}

	/* .First-div {
	width: 100%;
	background-image: url('/static/jgbj.png');
	align-items: center;
	padding-left: 30rpx;
	padding-top: 30rpx;
	font-size: 30rpx;
	animation: fadeIn 0.8s ease-in-out;

} */

	/* 顶部信息栏 */
	.ShowTitle {
		width: 95%;
		height: 100rpx;
		font-size: 30rpx;
		margin-top: 40rpx;


	}

	/* 时间显示 */
	.ShowTitle-1 {
		float: left;
		width: 450rpx;
		height: 80rpx;
		background: #d5e6f8;
		color: #2e8ee4;
		line-height: 80rpx;
		text-align: center;
		border-radius: 20rpx;
		border-bottom-right-radius: 0rpx;
		border-top-right-radius: 0rpx;
		font-weight: bold;
		margin-left: 5rpx;
		animation: fadeIn 1s ease-in-out;
		transition: transform 1s;
	}

	.ShowTitle-2 {
		float: left;
		width: 220rpx;
		height: 80rpx;
		background: #47a0f2;
		color: #ffffff;
		line-height: 80rpx;
		text-align: center;
		border-radius: 20rpx;
		border-bottom-left-radius: 0rpx;
		border-top-left-radius: 0rpx;
		font-weight: bold;
		animation: fadeIn 1s ease-in-out;
		transition: transform 1s;
	}

	.ShowTitle-1.rotateda,
	.ShowTitle-2.rotatedb {
		transform: rotateY(360deg);
	}

	/* 分数板区域 */
	.Score {
		width: 100%;
		max-width: 690rpx;
		background-color: #ffffff;
		padding: 30rpx;
		margin-top: 40rpx;
		margin-bottom: 30rpx;
		box-sizing: border-box;
		border-radius: 20rpx;
		box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.08);
		animation: fadeIn 1s ease-in-out;
		transition: transform 0.3s ease, box-shadow 0.3s ease;
	}

	.Score:hover {
		transform: scale(1.01);
		box-shadow: 0 8rpx 30rpx rgba(0, 0, 0, 0.12);
	}

	/* 分数标题 */
	.ScoreTitle {
		height: 80rpx;
		line-height: 80rpx;
		font-weight: bold;
		padding-left: 60rpx;

		/* background-image: url('@/static/Blue.png'); */
		background-repeat: no-repeat;
		background-size: 28rpx 28rpx;
		background-position: 20rpx center;
		margin-bottom: 30rpx;
		color: #000000;
		font-size: 32rpx;
	}

	/* 总分数栏 */
	.ScoreLast {
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #f3f8fe;
		padding: 20rpx;
		border-radius: 16rpx;
		font-size: 28rpx;
		color: #444;
		box-shadow: inset 0 0 8rpx rgba(0, 0, 0, 0.05);
	}

	/* 结果分析区域 */
	.Third-div {
		width: 100%;
		max-width: 690rpx;
		background-color: #ffffff;
		padding: 30rpx;
		box-sizing: border-box;
		border-radius: 20rpx;
		box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.06);
		animation: fadeIn 1.2s ease-in-out;
		transition: transform 0.3s ease, box-shadow 0.3s ease;
	}

	.Third-div:hover {
		transform: scale(1.02);
		box-shadow: 0 8rpx 30rpx rgba(0, 0, 0, 0.12);
	}

	/* 测评结果标题 */
	.ResultTitle {
		display: flex;
		align-items: center;
		height: 80rpx;
		font-weight: bold;
		padding-left: 60rpx;
		/* background-image: url('@/static/Blue.png'); */
		background-repeat: no-repeat;
		background-size: 28rpx 28rpx;
		background-position: 20rpx center;
		margin-bottom: 30rpx;
		color: #000000;
		font-size: 32rpx;
	}

	/* 结果文字容器 */
	.Result {
		width: 100%;
		background-color: #f4faff;
		padding: 20rpx;
		border-radius: 20rpx;
		box-sizing: border-box;
		font-size: 26rpx;
		line-height: 1.8;
		color: #333;
	}

	/* 总分标签样式 */
	.ZongFen {
		display: inline-block;
		padding: 12rpx 24rpx;
		background-color: #6bb8fe;
		color: #fff;
		border-radius: 24rpx 0rpx;
		font-size: 26rpx;
		line-height: 1;
		margin-bottom: 24rpx;
		box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.1);
	}

	/* 分析文字部分 */
	.bgk1 {
		background-color: #f3f8fe;
		width: 100%;
		padding: 30rpx;
		box-sizing: border-box;
		border-radius: 20rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.04);
		margin-bottom: 30rpx;
		animation: fadeIn 1.4s ease-in-out;
	}

	/* 雷达图区域 */
	.bgk2 {
		background: linear-gradient(to left bottom, #e0f7ff, #ffffff);
		width: 100%;
		/* 占满父容器宽度 */
		padding: 30rpx;
		/* 内边距可适当调整 */
		box-sizing: border-box;
		border-radius: 20rpx;
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
		min-height: 600rpx;
		/* 增大雷达图区域的高度 */
		animation: zoomIn 1s ease-in-out;
	}



	/* 动画关键帧定义 */
	@keyframes fadeIn {
		from {
			opacity: 0;
			transform: translateY(2rpx);
		}

		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

	@keyframes zoomIn {
		from {
			opacity: 0;
			transform: scale(0.9);
		}

		to {
			opacity: 1;
			transform: scale(1);
		}
	}
</style>